<template>
	<view>
		<u-navbar leftText="" :border-bottom="false" :placeholder="true" bgColor="#82978e" :safeAreaInsetTop="true"
			placeholder>
			<view slot="left">
				<image :src="logo" style="width:120rpx;" mode="widthFix"></image>
			</view>
			<view slot="center" style="width: 340rpx;padding-right: 50rpx;">
				<u-search placeholder="去搜索" shape="round" :showAction="false" @search="search"></u-search>
			</view>
		</u-navbar>
		<view class="content">
			<mswiper :list="slideImage" height="300rpx" :nextMargin="0" :previousMargin="0" :radius="10" />
		</view>

		<view class="menus">
			<swiperMenus :list="menuList" :size="5" />
		</view>

		<view class="yx">
			<view class="u-flex u-row-between">
				<view class="text1">京东优选</view>
				<view class="u-flex u-row-left">
					<view class="text2">更多优选</view>
					<u-icon name="arrow-right" size="22rpx" color="#000" />
				</view>
			</view>
			<view style="margin-top: 20rpx;">
				<swiperProduct :list="yxList" @change="changeDetail" />
			</view>
		</view>

		<view style="padding: 20rpx;">
			<view style="margin-top: 30rpx;margin-bottom: 30rpx;">
				<slidingList :tabs="cateList" @change="change" />
			</view>
			<view>
				<productList :list="productList" :flag="2" />
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>
<script>
	import {
		getConfig,
		getGroupValue,
	} from "@/api/public.js"
	import mswiper from '@/components/swiperList.vue'
	import {
		getMenuList,
		getGoodCategoryList
	} from '@/api/jdGoodCategory.js'
	import {
		getGoodList
	} from '@/api/jdGood.js'
	import swiperMenus from '@/components/swiperMenus.vue'
	import swiperProduct from '@/components/swiperProduct.vue'
	import slidingList from '@/components/slidingList'
	import productList from '@/components/productList.vue'
	import {
		goNav
	} from '@/lib/Comment.js'
	export default {
		components: {
			mswiper,
			swiperMenus,
			swiperProduct,
			slidingList,
			productList
		},
		data() {
			return {
				logo: '',
				slideImage: [],
				menuList: [],
				yxList: [],
				cateList: [],
				productList: [],
				page: {
					page: 1,
					limit: 20,
				},
				loading: false,
				loadend: false,
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			getConfig("home_logo").then(res => {
				this.logo = res.data.value
			})
			getGroupValue("jd_silde_image").then(res => {
				this.$set(this, 'slideImage', res.data)
			})
			getMenuList().then(res => {
				this.menuList = res.data
			})
			getGoodList({
				page: 1,
				limit: 20,
				eliteId: 32
			}).then(res => {
				this.yxList = res.data.list
			})
			getGoodCategoryList().then(res => {
				this.cateList = res.data
				if (this.cateList.length > 0) {
					this.page.eliteId = this.cateList[0].eliteId
					this.getList()
				}
			})
		},
		methods: {
			search(value) {
				console.log('>>>')
				goNav("/pages/sub/jd/productList?name=" + value)
			},
			goProduct(id) {
				goNav("/pages/sub/jd/detail?skuId=" + id)
			},
			changeDetail(index, id) {
				console.log('..', index, id)
				this.goProduct(id)
			},
			getList() {
				this.loading = true
				getGoodList(this.page).then(res => {
					this.page.page++
					this.productList = this.productList.concat(res.data.list)
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
				}).catch(err => {
					this.loading = false
					this.loadend = true
				})
			},
			change(index, item) {
				console.log('>>>', JSON.stringify(item))
				this.page.page = 1;
				this.productList = []
				this.loadend = false;
				this.loading = false;
				this.page.eliteId = item.eliteId
				this.getList()
			},
		},
		onReachBottom() {
			if (!this.loadend && !this.loading)
				this.getList()
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #f0f0f0;
	}
</style>
<style scoped lang="scss">
	.content {
		padding: 20rpx;
	}

	.text1 {
		font-size: 30rpx;
	}

	.text2 {
		font-size: 24rpx;
		color: #707070;
	}

	.yx {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.07);
	}
</style>
